{% extends "layout_index.html" %}
{% load static %}

{% block title %}
    <title>修改{{ title }}</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/add.css' %}">
{% endblock %}

{% block main_content %}
    <div class="form-container">
        <div class="form-header">
            <h3><i class="fa-solid fa-edit"></i> 修改{{ title }}</h3>
        </div>
        
        <form method="post" novalidate>
            {% csrf_token %}
            
            {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.help_text %}
                        <small class="form-text text-muted">{{ field.help_text }}</small>
                    {% endif %}
                    {% if field.errors %}
                        <span class="text-danger">
                            <i class="fa-solid fa-circle-exclamation"></i> 
                            {{ field.errors.0 }}
                        </span>
                    {% endif %}
                </div>
            {% endfor %}

            <div class="btn-container">
                <a href="{% url 'class_list' %}" class="btn btn-back">
                    <i class="fa-solid fa-arrow-left"></i> 返回
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-save"></i> 保存修改
                </button>
            </div>
        </form>

        {% if messages %}
        <div class="messages">
            {% for message in messages %}
                <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
{% endblock %}

{% block js %}
<script>
    // 自动聚焦第一个输入框
    $(document).ready(function() {
        $('form input:first').focus();
    });

    // 自动隐藏消息提示
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 3000);
</script>
{% endblock %}
